﻿<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<link rel="stylesheet" type="text/css" href="css/lunbo.css">

<meta charset="utf-8">

<head>
        <title>我的多肉花园</title>
</head>

<body>
        <div class="back">


                <div class="top">
                        <div class="garden">
                                <div class="gardenintop"><a href="" class="word1">我的多肉花园</a></div>
                                <div class="gardeninbottom"><a href="" class="word2">My Garden of Succulent Plants</a></div>
                        </div>
                        <div class="gardenout">
                                <div class="gardenoutbig" id="type1"><a href="#111" class="word3">种类简介</a></div>
                                <div class="gardenoutsmall"></div>
                                <div class="gardenoutbig" id="type2"><a href="#222" class="word3">成果展示</a></div>
                                <div class="gardenoutsmall" ></div>
                                <div class="gardenoutbig" id="type3"><a href="#333" class="word3">关于种植</a></div>
                                <div class="gardenoutsmall"></div>
                                <div class="gardenoutbig" id="type4"><a href="#444" class="word3">园丁笔记</a></div>
                                <div class="gardenoutsmall"></div>
                                <div class="gardenoutbig" id="type5"><a href="#555" class="word3">联系我们</a></div>
                        </div>
                </div>


                <div class="second" id="111">
                        <div class="name">
                                <div class="nametop"><a href="" class="word4">种类简介</a></div>
                                <div class="namebottom"><a href="" class="word5">好听的名字和好看的样子</a></div>
                        </div>

                        <div class="type">
                                <div class="typetop">
                                        <div class="typetop1">
                                                <img src="img/初恋.jpg" width="100%" />
                                                <div class="frame"><a href="" class="word6-1">初恋</a></div>
                                        </div>
                                        <div class="typetop2">
                                                <img src="img/姬星美人.jpg" width="100%" />
                                                <div class="frame"><a href="" class="word6-2">姬星美人</a></div>
                                        </div>
                                        <div class="typetop3">
                                                <img src="img/静夜.jpg" width="100%" />
                                                <div class="frame"><a href="" class="word6-2">静夜</a></div>
                                        </div>
                                </div>
                                <div class="typebottom">
                                        <div class="typebottom1">
                                                <img src="img/蓝石莲.jpg" width="100%" />
                                                <div class="frame"><a href="" class="word6-2">蓝石莲</a></div>
                                        </div>
                                        <div class="typebottom2">
                                                <img src="img/雅乐之舞.jpg" width="100%" />
                                                <div class="frame"><a href="" class="word6-2">雅乐之舞</a></div>
                                        </div>
                                        <div class="typebottom3">
                                                <img src="img/子持莲华.jpg" width="100%" />
                                                <div class="frame"><a href="" class="word6-1">子持莲华</a></div>
                                        </div>
                                </div>
                        </div>
                </div>

                <div class="third" id="222">
                        <div class="name">
                                <div class="nametop"><a href="" class="word4">成果展示</a></div>
                                <div class="namebottom">
                                        <a href="" class="word5"></a>
                                </div>
                        </div>

                        <div class="nav-bar">
                                <div id="container">
                                        <ol class="nav-bar-container">
                                                <li> <img src="img/7.jpg" alt=""></li>
                                                <li> <img src="img/8.jpg" alt=""></li>
                                                <li> <img src="img/9.jpg" alt=""></li>
                                                <li> <img src="img/1.jpg" alt=""></li>
                                                <li class="active" style="transform: scale(1.8);"><img src="img/2.jpg"></li>
                                                <li> <img src="img/3.jpg" alt=""></li>
                                                <li> <img src="img/4.jpg" alt=""></li>
                                                <li> <img src="img/5.jpg" alt=""></li>
                                                <li> <img src="img/6.jpg" alt=""></li>
                                                <li> <img src="img/7.jpg" alt=""></li>
                                                <li> <img src="img/8.jpg" alt=""></li>
                                                <li> <img src="img/9.jpg" alt=""></li>
                                                <li> <img src="img/1.jpg" alt=""></li>
                                                <li> <img src="img/2.jpg" alt=""></li>
                                                <li> <img src="img/3.jpg" alt=""></li>
                                        </ol>
                                </div>
                                <div id="left_button" class="mybutton">
                                        <img src="img/left.png" />
                                </div>
                                <div id="right_button" class="mybutton">
                                        <img src="img/right.png" />
                                </div>
                        </div>


                </div>


                <div class="fourth" id="333">
                        <div class="name">
                                <div class="nametop"><a href="" class="word4">关于种植</a></div>
                                <div class="namebottom">
                                        <a href="" class="word5"></a>
                                </div>
                        </div>
                        <div class="plantone">
                                <div class="temperature"></div>
                                <div class="temperatureword"><a href="" class="word7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大多数多肉植物在低温环境都难以生存，所以冬天应该将栽培环境的温度保持在8°以上。而夏天的最高温度最好控制在35°以内，晚间尽量控制在30°以下。</a></div>
                        </div>
                        <div class="planttwo">
                                <div class="water"></div>
                                <div class="waterword"><a href="" class="word7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;春天和秋天是大多数多肉生长的季节，植物水分需求多，一般三天左右可以浇一次水；夏天和冬天有很多休眠和半休眠的多肉植物，可以少量地给水，一般半个月或一个月左右浇一次水就可以了。</a></div>
                        </div>
                        <div class="plantthree">
                                <div class="soil"></div>
                                <div class="soilword"><a href="" class="word7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多肉植物大多生长在热带荒漠区，那里土壤贫瘠，大多是砾石和粗砂，只有少量的土壤和有机质，这样的土壤极具通气性，所以我们在种植多肉配置介质的时候应当尽量的接近多肉原生态环境。</a></div>
                        </div>
                </div>

                <div class="fifth" id="444">
                        <div class="nametwo"><a href="" class="word4">园丁笔记</a></div>
                        <div class="note">
                                <div class="notein1"></div>
                                <div class="notein2"></div>
                                <div class="notein3"></div>
                        </div>
                        <div class="noteword">
                                <div class="noteword1"><a href="" class="word8">培育日记</a></div>
                                <div class="noteword2"><a href="" class="word8">心得体会</a></div>
                                <div class="noteword2"><a href="" class="word8">专业资料</a></div>
                        </div>
                </div>


                <div class="sixth" id="555">
                        <div class="name">
                                <div class="nametop"><a href="" class="word4">联系我们</a></div>
                                <div class="namebottom">
                                        <a href="" class="word5"></a>
                                </div>
                        </div>
                        <div class="contact">
                                <div class="face"></div>
                                <div class="contactword"><a href="" class="word9">你可以给喜欢多肉的突破宝宝发消息哦！</a></div>
                        </div>
                </div>


                <div class="bottom"><a href="" class="word10">@Chloe</a></div>



        </div>
        </div>



        </div>

</body>

<script src="js/jquery.min.js"></script>
<script src="js/lunbo.js"></script>
<script src="js/index.js"></script>

</html>